<script type="text/javascript" src="{{base_url()}}syslib/tokeninput/jquery.tokeninput.js"></script>
<link rel="stylesheet" href="{{base_url()}}syslib/tokeninput/token-input.css" type="text/css" />
<link rel="stylesheet" href="{{base_url()}}syslib/tokeninput/token-input-facebook.css" type="text/css" />        
<div class="grid_12">
    <table style="">
        <tr>
            <td style="vertical-align: top;">   
                Chọn Những Sản Phẩm Cần Gửi ( Tối đa 10 sản phẩm )
            </td>
        </tr>
        <tr>
            <td style="vertical-align: top;text-align: left;width: 402px">   
                <input type="text" id="listProduct" name="blah" style="width: 100%"  value=""/>
            </td>
        </tr>
        <tr>
            <td style="vertical-align: top" class="pt20">
                Chọn nhóm khách hàng cần gửi mail.
            </td>
        </tr>
        <tr>
            <td style="vertical-align: top">
                <div>
                    <select id="CustommerGroup" class="classic-select w100pc">
                        <option value="">[ --- Nhóm Khách Hàng --- ]</option>
                        <option value="-100">Tất cả</option>
                        <option value="-1">Danh sách đăng ký nhận thông báo deal</option>
                        {{foreach $Data["Group"] as $g}}
                            <option value="{{$g->Value}}">{{$g->Name}}</option>
                        {{/foreach}}
                    </select>    
                </div>
            </td>
        </tr>
    </table>
    <div id="mailList" class="pl8">

    </div>
</div>
<div class="grid_16">
    <p>Xem trước nội dung Email</p>
    <table class="w100pc classic-table">
        <tr>
            <td colspan="2">
                
<!--                    <select class="classic-select w100pc">
                        <option value="noreply@dealgiadung.com">Dealgiadung&lt;noreply@dealgiadung.com&gt;</option>
                    </select>-->
                    Sử dụng tài khoản <tt>Dealgiadung &lt; noreply@dealgiadung.com &gt;</tt> để gửi thông báo Deal mới tới khách hàng
                
            </td>
        </tr>
        <tr>
            <td class="w100px">
                <tt>Tiêu Đề :</tt>
            </td>
            <td>
                <div class="grid_12">
                    <input class="classic-input w100pc" id="txtMailSubject"/>
                </div>
            </td>
        </tr>
        <tr>
            <td class="w100px">
                <tt>Nội Dung :</tt>
            </td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="emailPreview">Vui lòng chọn sản phẩm cần gửi</div>
            </td>
        </tr>
    </table>
</div>
<div class="clear"></div>
<div class="pl8 pt8 pb8 bdtccc mt8 pr">
    <div id="tipTestMail" class="tip-green hidden" style="visibility: inherit; left: 36px; bottom: 36px; opacity: 1;position: absolute">
        <div class="tip-inner tip-bg-image tipcontent">
            Email mặc định không tồn tại.<br/>
            Vui lòng nhập email vào đây.<br/>
            <input class="classic-input" id="txtTestEmail"/>
        </div>
        <div class="tip-arrow tip-arrow-bottom" style="visibility: inherit;position: absolute"></div>
        <div class="tip-close" onclick="hideparent(this);"></div>
    </div>
    <button class="classic-button" onclick="testMail()"><span>Gửi thử</span></button>
    <button class="classic-button" onclick="sendMail()"><span>Gửi thư cho danh sách khách hàng</span></button>
</div>
<div>
    <pre>


Chú ý:
    Các bước gửi thư.
        1. Chọn sản phẩm cần gửi(có thể chọn nhiều sản phẩm).
        2. Chọn danh sách khách hàng và tùy chỉnh danh sách khách hàng.
        3. Nhập tiêu đề thư (Subject).
        4. Chọn tài khoản Email sẽ gửi thông báo đến khách hàng.
        5. Kiểm tra hoạt động của chức năng gửi thông báo(có thể bỏ qua). 
            Chọn gửi thử để gửi vào email cố định.
        6. Gửi thư đến danh sách khách hàng đã chọn
    </pre>
</div>
<style>.fwb{font-weight: bold}</style>
<script type="text/javascript">
    function threadshow(index){
        $(".thread").hide();
        $(".thread.t"+index).show();
        $(".threadpage span.fwb").removeClass("fwb");
        $(".threadpage span.t"+index).addClass("fwb");
    }
    function testMail(){
        var testmail=$("#txtTestEmail").val();
        if(!_FcheckEmail(testmail)){
            $('#tipTestMail').stop().fadeIn(500);
            $("#txtTestEmail").focus();
            return;
        }
        $('#tipTestMail').hide();
        if(!_FcheckFilled($('#txtMailSubject').val())){
            $("#txtMailSubject").focus();
            return;
        }
        var products=$('#listProduct').tokenInput("get");
        if(products.length==0){
            tipMessage('Bạn chưa chọn sản phẩm');
            return;
        }
        var url="{{base_url()}}APanel/sendmail/TestMail";
        var data={
            Subject:$('#txtMailSubject').val(),
            Email:$("#txtTestEmail").val(),
            Products:products
        };
        jqxAjax(url,data,function(result){
            isrunning=false;
            tipMessage(result.msg);
            
        });
    }
    function sendMail(){
        var Group=$("#CustommerGroup").val();
        if(!_FcheckFilled(Group)){
            tipMessage("Hãy chọn danh sách khách hàng cần gửi thông báo deal mới!");
            return;
        }
        //$('#tipTestMail').hide();
        if(!_FcheckFilled($('#txtMailSubject').val())){
            tipMessage('Bạn chưa nhập tiêu đề thư.');
            $("#txtMailSubject").focus();
            return;
        }
        var products=$('#listProduct').tokenInput("get");
        if(products.length==0){
            tipMessage('Bạn chưa chọn sản phẩm.');
            return;
        }
        var url="{{base_url()}}APanel/sendmail/SendMail";
        var data={
            Subject:$('#txtMailSubject').val(),
            Group:Group,
            Products:products
        };
        jqxAjax(url,data,function(result){
            isrunning=false;
            tipMessage(result.msg);
            
        });
    }
    $(document).ready(function () {
        $("#CustommerGroup").change(function(){
            if($(this).val()!=""){
                htmlAjax("{{base_url("APanel/sendmail/getCustomerByGroup")}}",{Group:$(this).val()} , $("#mailList"));
            }
        });
        $("#listProduct").tokenInput("{{base_url()}}APanel/sendmail/tokenProduct", {
            resultsFormatter: function(item){ return "<li><div style='width:40px;color:#000;float:left;'>" + item.ProductID + "</div> " + item.ProductName + "</li>" },
            tokenFormatter: function(item) { return "<li>" + item.ProductName + "</li>" },
            propertyToSearch: "ProductID",
            hintText:"Nhập để tìm sản phẩm",
            minChars: 1,
            tokenLimit: 10,
            onAdd: function (item) {
                var products=$('#listProduct').tokenInput("get");
                htmlAjax("{{base_url("APanel/sendmail/Preview")}}",{products:products} , $("#emailPreview"));
            },
            onDelete: function (item) {
                var products=$('#listProduct').tokenInput("get");
                htmlAjax("{{base_url("APanel/sendmail/Preview")}}",{products:products} , $("#emailPreview"));
            }
        });
    });
</script>